import React from 'react'
import { Row, Col, Drawer } from "antd";
import { Link } from 'react-router-dom'

import style from './index.scss'
import hor_logo from '../../assets/hor_logo.png'

class Head extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            visible_drawer: false
        }
    }

    hdShowDrawer = () => {
        this.setState({
            visible_drawer: true
        })
    }

    hdCloseDrawer = () => {
        this.setState({
            visible_drawer: false
        })
    }

    render() {

        const {visible_drawer} = this.state

        return (
            <div className={style.nav__outer}>
                <Row type="flex" align="middle" className={style.nav}>
                    <Col xs={0} sm={0} md={1}></Col>
                    <Col xs={12} sm={12} md={11}>
                        <img className={style.hor__logo} src={hor_logo}></img>
                    </Col>
                    <Col xs={0} sm={0} md={12}>
                        <ul className={style.nav__ul}>
                            <li><Link to='/'>首页</Link></li>
                            <li><Link to='/about'>公司简介</Link></li>
                            {/*<li>诚聘英才</li>*/}
                            <li><Link to='/product'>案例展示</Link></li>
                            <li><Link to='/contact'>联系我们</Link></li>
                        </ul>
                    </Col>
                    <Col xs={12} sm={12} md={0} className={style.nav__ul_wr}>
                        <span onClick={this.hdShowDrawer} className={style.span_icon}>
                            <span className={style.span_icon__inner}></span>
                        </span>
                        <Drawer
                            title={false}
                            placement="left"
                            closable={false}
                            onClose={this.hdCloseDrawer}
                            visible={visible_drawer}
                            className="drawer"
                        >
                            <p className='drawer__item'><Link to='/' >首页</Link></p>
                            <p className='drawer__item'><Link to='/about'>公司简介</Link></p>
                            {/*<p>诚聘英才</p>*/}
                            <p className='drawer__item'><Link to='/product'>案例展示</Link></p>
                            <p className='drawer__item'><Link to='/contact'>联系我们</Link></p>
                        </Drawer>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default Head
